<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1
    {
        width: 500px;
        height: 500px;
        background-color: red;
        position: relative;
    }
    .box2
    {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
        /*
        开启绝对定位后，此串代码可使元素块在水平上居中
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        同理，类似的代码还能使其在垂直方向上居中，所以这些代码同时加载，会造成元素块版面居中
        */
        /*
        水平布局
        margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=包含块的内容区的宽度
        开启绝对定位后
        左边就要多加一个left和right
        当开启了绝对定位以后，水平方向的布局等式就需要添加一个left和right两个值
        此时规则和之前一样，只是多添加了两个值
        当发生过渡约束时
        如果九个值中没有auto，则自动调整right以使等式成立
        如果有auto，则自动调整auto的值以使等式满足
        可以设置auto的值
        margin width left right
        因为right和left的值默认是auto，所以如果不知道left和right
        则等式不满足时，会自动调整这两个值

        垂直布局
        top+margin-top+margin-bottom+padding-top+padding-bottom+border-top+border-bottom+height=包含块的内容区的高度

        */
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>